<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
  
          <div class="flex justify-between items-center">
            <div>
              <el-button class="marginRB10" type="primary" @click="handleResetHeat"
              >批量重置热度
              </el-button>
              <el-button class="marginRB10" type="danger" @click="handleDeleteAll"
              >批量删除
              </el-button>
            </div>
            <div>
              <el-button class="marginRB10" type="primary" @click="searchList">
                搜索
              </el-button>
              <el-button class="marginRB10" type="primary" @click="resetList">
                重置
              </el-button>
            </div>
          </div>
  
          <el-select
            v-model="listQuery.type_id"
            class="marginRB10"
            clearable
            filterable
            placeholder="请选择房间分类"
            @clear="listQuery.type_id = undefined"
          >
            <el-option
              v-for="item in type_idStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-select
            v-model="listQuery.label_id"
            class="marginRB10"
            clearable
            filterable
            placeholder="请选择房间标签"
            @clear="listQuery.label_id = undefined"
          >
            <el-option
              v-for="item in label_idStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-select
            v-model="listQuery.status"
            class="marginRB10"
            clearable
            filterable
            placeholder="请选择房间状态"
            @clear="listQuery.status = undefined"
          >
            <el-option
              v-for="item in statusStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-select
            v-model="listQuery.recommend_status"
            class="marginRB10"
            clearable
            filterable
            placeholder="请选择推荐状态"
            @clear="listQuery.status = undefined"
          >
            <el-option
              v-for="item in recommend_statusStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-select
            v-model="listQuery.top_status"
            class="marginRB10"
            clearable
            filterable
            placeholder="请选择置顶状态"
            @clear="listQuery.status = undefined"
          >
            <el-option
              v-for="item in top_statusStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
          <!-- <el-select
            v-model="listQuery.ball_status"
            class="marginRB10"
            clearable
            filterable
            placeholder="是否显示球球游戏"
            @clear="listQuery.ball_status = undefined"
          >
            <el-option
              v-for="item in ballStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select> -->
          <el-date-picker
            v-model="listQuery.start_at"
            class="marginRB10"
            clearable
            placeholder="创建开始时间"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
          <el-date-picker
            v-model="listQuery.end_at"
            class="marginRB10"
            clearable
            placeholder="创建结束时间"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
          <el-input
            v-model="listQuery.search"
            class="marginRB10"
            clearable
            placeholder="手机号、房间号、房间名称"
            style="width:200px"
          ></el-input>
          <!-- <el-select
            v-model="listQuery.pk_switch"
            class="marginRB10"
            clearable
            filterable
            placeholder="请选择房间PK状态"
            @clear="listQuery.pk_switch = undefined"
          >
            <el-option
              v-for="item in roomPkStatus"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select> -->
  
        </div>
        <div class="item">
          <el-table
            ref="dataList"
            v-loading="listLoading"
            :data="menuList"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            class="mb-3"
            max-height="1250"
            row-key="id"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column label="序号" prop="id" width="80"></el-table-column>
            <el-table-column label="公会号" prop="room_id" width="80"></el-table-column>
            <el-table-column label="房间号" prop="room_code" width="80"></el-table-column>
            <el-table-column label="房间名" prop="room_name" width="120"></el-table-column>
            <el-table-column label="房间封面" prop="cover_picture" width="220">
              <template slot-scope="scope">
                <el-popover max-width="220" placement="right" trigger="hover">
                  <img
                    :src="scope.row.cover_picture"
                    alt=""
                    style="max-width: 200px;max-height: 200px"
                  />
                  <img
                    slot="reference"
                    :src="scope.row.cover_picture"
                    alt=""
                    style="width: 50px;"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="房间背景" prop="bg_picture" width="100">
              <template slot-scope="scope">
                <el-popover max-width="220" placement="right" trigger="hover">
                  <img
                    :src="scope.row.bg_picture"
                    alt=""
                    style="max-width: 200px;max-height: 200px"
                  />
                  <img
                    slot="reference"
                    :src="scope.row.bg_picture"
                    alt=""
                    style="width: 50px;"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="上麦模式" prop="wheat" width="100">
              <template slot-scope="scope">
                {{ scope.row.wheat === 1 ? '自由上麦' : '申请上麦' }}
              </template>
            </el-table-column>
            <el-table-column label="封禁时间" prop="seal_time" width="100"></el-table-column>
            <el-table-column label="注册时间" prop="add_time" width="100"></el-table-column>
            <el-table-column label="显示状态" prop="state" width="100">
              <template slot-scope="scope">
                {{ scope.row.state === 1 ? '显示' : '隐藏' }}
              </template>
            </el-table-column>
            <el-table-column label="置顶状态" prop="top_status" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.top_status===1 ? 'success': 'info'">{{
                    scope.row.top_status === 1 ? '是' : '否'
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐状态" prop="recommend_status" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.recommend_status ===1 ? 'success': 'info'">{{
                    scope.row.recommend_status === 1 ? '是' : '否'
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="用户号" prop="user_code" width="100"></el-table-column>
            <el-table-column label="房主电话" prop="mobile" width="130"></el-table-column>
            <el-table-column label="房间标签" prop="label_name" width="100"></el-table-column>
            <el-table-column label="房间主题" prop="theme_title" width="100"></el-table-column>
            <el-table-column
              label="房间分类"
              prop="sys_type_name"
              width="100"
            ></el-table-column>
            <el-table-column
              label="房间热度"
              prop="water_ratio"
              sortable
              width="120"
            ></el-table-column>
            <el-table-column label="房间PK状态" prop="pk_switch">
              <template slot-scope="scope">
                {{ scope.row.pk_switch === 1 ? '开启' : '关闭' }}
              </template>
            </el-table-column>
  
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-dropdown trigger="click">
                  <el-button type="primary"
                  >操作<i class="el-icon-arrow-down el-icon--right"></i
                  ></el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="showRecommendedRoom(scope.row)"
                    >{{ scope.row.recommend_status === 1 ? '取消推荐' : '推荐房间' }}
                    </el-dropdown-item
                    >
                    <el-dropdown-item @click.native="showTopRoom(scope.row)"
                    >{{ scope.row.top_status === 1 ? '取消置顶' : '置顶房间' }}
                    </el-dropdown-item
                    >
                    <el-dropdown-item @click.native="rowUpdate(scope.row)"
                    >编辑
                    </el-dropdown-item
                    >
                    <el-dropdown-item @click.native="rowWater(scope.row)"
                    >房间流水
                    </el-dropdown-item
                    >
                    <el-dropdown-item @click.native="rowPopularity(scope.row)"
                    >赠送人气
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="resetAudit(scope.row)"
                    >重置房间审核
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="scope.row.seal_time === ''"
                      @click.native="rowBan(scope.row)"
                    >封房间
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-else
                      @click.native="rowCancelBan(scope.row)"
                    >解封
                    </el-dropdown-item
                    >
                    <el-dropdown-item
                      divided
                      @click.native="rowWaterSet(scope.row)"
                    >流水设置
                    </el-dropdown-item
                    >
                    <!-- <el-dropdown-item @click.native="rowDelete(scope.row)">删除</el-dropdown-item> -->
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <cus-pagination
            v-show="total > 0"
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="getList"
          />
        </div>
      </el-card>
  
      <el-dialog
        v-dialogDrag
        :title="titleMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        @close="handleDialogClose"
      >
        <el-form
          ref="dataForm"
          :model="form"
          :rules="formrules"
          label-position="right"
          label-width="120px"
        >
          <el-form-item label="房间名称" prop="room_name">
            <el-input v-model="form.room_name"/>
          </el-form-item>
          <el-form-item label="房间号" prop="room_id">
            <el-input v-model="form.room_id"/>
          </el-form-item>
          <el-form-item label="房间密码" prop="password">
            <el-input v-model.number="form.password" placeholder="留空不做修改"/>
          </el-form-item>
          <el-form-item label="房间玩法" prop="playing">
            <el-input v-model="form.playing" placeholder="请输入房间玩法"/>
          </el-form-item>
          <el-form-item label="房间欢迎语" prop="greeting">
            <el-input v-model="form.greeting" placeholder="请输入房间欢迎语"/>
          </el-form-item>
          <el-form-item label="房间标签" prop="label_id">
            <el-select
              v-model="form.label_id"
              filterable
              placeholder="请选择房间标签"
            >
              <el-option
                v-for="item in labelOptions"
                :key="'房间标签' + item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="个人分类" prop="type_id">
            <el-select
              v-model="form.type_id"
              filterable
              placeholder="请选择个人标签"
            >
              <el-option :value="0" label="请选择"></el-option>
              <el-option
                v-for="item in typeOptions"
                :key="'个人标签' + item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系统分类" prop="sys_type_id">
            <el-select
              v-model="form.sys_type_id"
              filterable
              placeholder="请选择房间标签"
            >
              <el-option :value="0" label="请选择"></el-option>
              <el-option
                v-for="item in sysTypeOptions"
                :key="'房间标签' + item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="热门排序" prop="hot_sort">
            <el-input v-model="form.hot_sort" placeholder="排序从小到大"/>
          </el-form-item>
          <el-form-item label="热门排序模式" prop="hot_model">
            <el-radio v-model="form.hot_model" :label="0">不设置</el-radio>
            <el-radio v-model="form.hot_model" :label="1">置顶模式</el-radio>
            <el-radio v-model="form.hot_model" :label="2">轮播模式</el-radio>
          </el-form-item>
          <el-form-item label="封面图" prop="cover_picture">
            <el-upload
              ref="upload"
              :auto-upload="true"
              :before-upload="beforeAvatarUpload"
              :file-list="editDetailFileList"
              :http-request="customizeUpload"
              :on-change="handleChangePic"
              :on-remove="handleEditDetailRemove"
              :on-success="handleEditDetailSuccess"
              action=""
              class="upload-demo"
              list-type="picture"
            >
              <el-button slot="trigger" size="small" type="primary"
              >上传封面图
              </el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="背景图" prop="bg_picture">
            <el-upload
              ref="upload"
              :auto-upload="true"
              :before-upload="beforeAvatarUpload"
              :file-list="editDetailFileList2"
              :http-request="customizeUpload"
              :on-change="handleChangePic"
              :on-remove="handleEditDetailRemove2"
              :on-success="handleEditDetailSuccess2"
              action=""
              class="upload-demo"
              list-type="picture"
            >
              <el-button slot="trigger" size="small" type="primary"
              >上传背景图
              </el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="球球大作战游戏" prop="show_ball_game">
            <el-radio v-model="form.show_ball_game" :label="1">显示</el-radio>
            <el-radio v-model="form.show_ball_game" :label="0">隐藏</el-radio>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-radio v-model="form.state" :label="1">显示</el-radio>
            <el-radio v-model="form.state" :label="0">隐藏</el-radio>
          </el-form-item>
          <el-form-item label="周星" prop="star_state">
            <el-radio v-model="form.star_state" :label="1">显示</el-radio>
            <el-radio v-model="form.star_state" :label="0">隐藏</el-radio>
          </el-form-item>
          <el-form-item label="是否靓号房" prop="is_pretty">
            <el-radio v-model="form.is_pretty" :label="1">是</el-radio>
            <el-radio v-model="form.is_pretty" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="设置老板麦" prop="is_boss_pit">
            <el-radio v-model="form.is_boss_pit" :label="1">是</el-radio>
            <el-radio v-model="form.is_boss_pit" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="房间音效" prop="sound_effect_id">
            <el-select
              v-model="form.sound_effect_id"
              filterable
              placeholder="请选择房间音效"
            >
              <el-option
                v-for="item in soundOptions"
                :key="'房间音效' + item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间PK状态" prop="pk_switch">
            <el-switch
              v-model="form.pk_switch"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer text-center">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </el-dialog>
  
      <!-- 赠送人气 -->
      <el-dialog :visible.sync="sendPopularityVisible" title="赠送人气">
        <el-form
          ref="sendPopularityForm"
          :model="sendPopularityForm"
          :rules="sendPopularityFormRules"
          label-width="120px"
        >
          <el-form-item label="房间名称" prop="room_name">
            <el-input v-model="sendPopularityForm.room_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="赠送人气" prop="popularity">
            <el-input v-model="sendPopularityForm.popularity"></el-input>
          </el-form-item>
          <el-form-item label="过期时间" prop="time">
            <el-date-picker
              v-model="sendPopularityForm.time"
              placeholder="请选择日期时间"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="sendPopularityVisible = false">
              取 消
            </el-button>
            <el-button
              type="primary"
              @click="confirmSendPopularity('sendPopularityForm')"
            >
              确 认
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  
      <!-- 创建厅 -->
      <el-dialog :visible.sync="createHallVisible" title="创建厅">
        <el-form
          ref="createHallForm"
          :model="createHallForm"
          :rules="createHallFormRules"
          label-width="120px"
        >
          <el-form-item label="公会名称" prop="sociaty_name">
            <el-input v-model="createHallForm.sociaty_name"></el-input>
          </el-form-item>
          <el-form-item label="公会描述" prop="description">
            <el-input
              v-model="createHallForm.description"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="公会号" prop="sociaty_no">
            <el-input v-model.number="createHallForm.sociaty_no"></el-input>
          </el-form-item>
          <el-form-item label="公会logo" prop="avatar">
            <el-upload
              ref="upload"
              :auto-upload="true"
              :before-upload="beforeAvatarUpload"
              :file-list="createHallFileList"
              :http-request="customizeUpload"
              :on-change="handleChangePic"
              :on-remove="handleCreateHallRemove"
              :on-success="handleCreateHallSuccess"
              action=""
              class="upload-demo"
              list-type="picture"
            >
              <el-button slot="trigger" size="small" type="primary"
              >上传LOGO
              </el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click="createHallVisible = false">
              取 消
            </el-button>
            <el-button
              type="primary"
              @click="confirmCreateHall('createHallForm')"
            >
              确 认
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  
      <!-- 房间流水 -->
      <el-dialog :visible.sync="roomWaterVisible" title="房间流水" width="">
        <el-card class="box-card">
          <p style="margin:0 0 20px 0">
            房间总收入:{{ roomWaterHeadTotalPrice }}金币
          </p>
          <div slot="header" class="clearfix">
            <el-date-picker
              v-model="roomWaterQuery.start_time"
              class="marginRB10"
              clearable
              placeholder="创建开始时间"
              type="date"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-date-picker
              v-model="roomWaterQuery.end_time"
              class="marginRB10"
              clearable
              placeholder="创建结束时间"
              type="date"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-button class="marginRB10" type="primary" @click="getRoomWaterList"
            >搜索
            </el-button
            >
            <el-button
              class="marginRB10"
              type="primary"
              @click="resetRoomWaterList"
            >重置
            </el-button
            >
          </div>
          <div class="item">
            <el-table v-loading="roomWaterListLoading" :data="roomWaterMenuList">
              <el-table-column label="收入" prop="number">
                <template slot-scope="scope">
                  {{ scope.row.number }}金币
                </template>
              </el-table-column>
              <el-table-column label="时间" prop="time"></el-table-column>
            </el-table>
          </div>
        </el-card>
        <cus-pagination
          v-show="roomWaterQuery.total > 0"
          :limit.sync="roomWaterQuery.perPage"
          :page.sync="roomWaterQuery.page"
          :total="roomWaterQuery.total"
          @pagination="getRoomWaterList"
        />
      </el-dialog>
  
      <!-- 封房间 -->
      <el-dialog :visible.sync="banVisible" title="封禁房间">
        <el-form ref="banForm" :model="banForm" label-width="120px">
          <el-form-item label="封禁时间" prop="seal_time">
            <el-date-picker
              v-model="banForm.seal_time"
              :rules="{
                required: true,
                message: '请选择日期',
                trigger: 'change'
              }"
              placeholder="选择日期"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :rules="{
              required: true,
              message: '请输入内容',
              trigger: 'blur'
            }"
            label="封禁理由"
            prop="remark"
          >
            <el-input v-model="banForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="banVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmBan('banForm')"
          >确 定
          </el-button
          >
        </div>
      </el-dialog>
  
      <!-- 解封用户 -->
      <el-dialog :visible.sync="cancelBanVisible" title="信息" width="435px">
        <span style="">确定执行此操作？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelBanVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmCancelBan">确 定</el-button>
        </span>
      </el-dialog>
  
      <!-- 流水设置 -->
      <el-dialog :visible.sync="setWaterVisible" title="流水设置">
        <el-form ref="setWaterForm" :model="setWaterForm" label-width="120px">
          <el-form-item
            :rules="[
              { required: true, message: '请输入内容', trigger: 'blur' },
              { type: 'number', message: '请输入数值' }
            ]"
            label="房间流水百分比"
            prop="percent"
          >
            <el-input v-model.number="setWaterForm.percent"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setWaterVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmSetWater('setWaterForm')"
          >确 定
          </el-button
          >
        </div>
      </el-dialog>
  
      <!-- 删除 -->
      <el-dialog :visible.sync="deleteVisible" title="确定删除吗?" width="435px">
        <span style=""
        ><em style="font-style:normal;color:red">删除后不可恢复</em
        >，你还要继续吗？</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmDelete">确 定</el-button>
        </span>
      </el-dialog>
  
      <!-- 批量重置房间热度 -->
      <el-dialog :visible.sync="resetHeatVisible" title="批量重置房间热度" width="435px">
        <span style="">确定要重置房间热度吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetHeatVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmBatchRoom">确 定</el-button>
        </span>
      </el-dialog>
  
      <!-- 推荐/取消推荐房间 -->
      <el-dialog :title="recommendRoom" :visible.sync="recommendedVisible" width="435px">
        <span style="">{{ isRecommended ? '确定要取消该房间推荐吗？' : '确定要推荐该房间吗？' }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="recommendedVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmRecommend">确 定</el-button>
        </span>
      </el-dialog>
  
      <!-- 置顶/取消置顶房间 -->
      <el-dialog :title="topRoom" :visible.sync="topVisible" width="435px">
        <span style="">{{ isTop ? '确定要取消该房间置顶吗？' : '确定要置顶该房间吗？' }}</span>
        <div style="margin: 15px 0;"/>
        <!--      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>-->
  
        <el-checkbox-group
          v-if="!isTop"
          v-model="checkedItem"
          :min="1"
          @change="handleCheckedChange"
        >
          <el-checkbox v-for="item in classification" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="topVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmTop">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
  
<script>
  import {
    batchResetPop,
    cancelRecommendRoom,
    deleteData,
    getLabelarr,
    getRoomWater,
    getTypearr,
    listData,
    listDetailData,
    postBanRoom,
    postCancelBanRoom,
    postCreateHall,
    postSendPopularity,
    postSetWater,
    putEditData,
    recommendRoom,
    resetRoomAudit
  } from '@/api/room/room'
  import { TopRoom } from '../../api/room/room'
  
  const notify = {
    type: 'success',
    message: '操作成功',
    position: 'bottom-right',
    showClose: false,
    duration: 3000
  }
  
  export default {
    data() {
      //这里就是整个checkName啦，就是方法一的使用
      const checkLength = (rule, value, callback) => {
        let len = value.toString().length
        if (len !== 6) {
          //重点重点，下面就是填写提示的文字
          callback(new Error('请输入6位数值'))
        } else {
          callback()
        }
      }
      const checkPasswordLength = (rule, value, callback) => {
        if (value) {
          let len = value.toString().length
          if (len !== 4) {
            //重点重点，下面就是填写提示的文字
            callback(new Error('请输入4位密码'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        checkAll: false,
        isIndeterminate: false,
        classification: [
          {
            label: '精选',
            value: 1
          },
          {
            label: '分类',
            value: 2
          },
          {
            label: '房间',
            value: 3
          },
          {
            label: '消息',
            value: 4
          }
        ],
        checkedItem: [],
        roomPkStatus: [
          { key: 0, lab: '关闭' },
          { key: 1, lab: '开启' }
        ],
        // 置顶/取消置顶房间
        topVisible: false,
        isTop: false,
        isRecommended: false,
        // 推荐/取消推荐房间热度
        recommendedVisible: false,
        // 重置房间热度
        resetHeatVisible: false,
  
        confirmBtn: false,
  
        dataIds: undefined,
        room_ids: undefined,
        recommendRoomIds: undefined,
        topRoomIds: undefined,
  
        // 删除
        deleteVisible: false,
  
        setWaterForm: {
          percent: undefined
        },
        // 流水设置
        setWaterVisible: false,
  
        // 解封房间显示
        cancelBanVisible: false,
        banForm: {
          remark: undefined,
          seal_time: undefined
        },
        // 封禁房间显示
        banVisible: false,
  
        roomWaterListLoading: false,
        roomWaterMenuList: [],
        roomWaterHeadTotalPrice: undefined,
        roomWaterQuery: {
          page: 1,
          perPage: 10,
          total: 0,
          id: undefined,
          start_time: undefined,
          end_time: undefined
        },
        // 房间流水显示
        roomWaterVisible: false,
  
        createHallFileList: [],
        createHallFormRules: {
          sociaty_name: [
            {
              required: true,
              message: '请输入公会名称1-50字',
              trigger: 'blur',
              min: 1,
              max: 50
            }
          ],
          // description:[{required:true,message:'请输入公会描述',trigger:'blur',min:1,max:200}],
          sociaty_no: [
            { trigger: 'blur', validator: checkLength, required: true }
          ],
          avatar: [{ required: true, message: '请上传图片', trigger: 'change' }]
        },
        createHallForm: {
          sociaty_name: undefined,
          description: undefined,
          sociaty_no: undefined,
          avatar: undefined
        },
        // 创建厅显示
        createHallVisible: false,
  
        sendPopularityFormRules: {
          popularity: [
            { required: true, message: '请输入赠送人气', trigger: 'blur' }
          ],
          time: [{ required: true, message: '请选择过期时间', trigger: 'change' }]
        },
        sendPopularityForm: {
          room_name: undefined,
          popularity: undefined,
          time: undefined
        },
        // 赠送人气显示
        sendPopularityVisible: false,
  
        // 编辑
        editDetailFileList: [],
        editDetailFileList2: [],
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10,
          star_state: undefined,
          is_hot: undefined,
          hot_model: undefined,
          type_id: undefined,
          label_id: undefined,
          status: undefined,
          ball_status: undefined,
          start_at: undefined,
          end_at: undefined,
          search: undefined,
          recommend_status: undefined,
          top_status: undefined,
          pk_switch: undefined,
          private: 1
        },
        soundOptions: [],
        labelOptions: [],
        sysTypeOptions: [],
        typeOptions: [],
  
        menuList: [],
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        type_idStatus: [],
        label_idStatus: [],
        recommend_statusStatus: [
          { key: 0, lab: '否' },
          { key: 1, lab: '是' }
        ],
        top_statusStatus: [
          { key: 0, lab: '否' },
          { key: 1, lab: '是' }
        ],
        star_stateStatus: [
          { key: 0, lab: '非周星房间' },
          { key: 1, lab: '周星房间' }
        ],
        is_hotStatus: [
          { key: 0, lab: '非热门房间' },
          { key: 1, lab: '热门房间' }
        ],
        hot_modelStatus: [
          { key: 0, lab: '普通' },
          { key: 1, lab: '置顶' },
          { key: 2, lab: '轮播' }
        ],
        statusStatus: [
          { key: 0, lab: '隐藏' },
          { key: 1, lab: '显示' }
        ],
        ballStatus: [
          { key: 0, lab: '否' },
          { key: 1, lab: '是' }
        ],
        form: {
          room_id: undefined,
          room_name: undefined,
          password: undefined,
          playing: undefined,
          greeting: undefined,
          label_id: undefined,
          type_id: undefined,
          sys_type_id: 0,
          hot_sort: undefined,
          hot_model: undefined,
          cover_picture: undefined,
          bg_picture: undefined,
          show_ball_game: undefined,
          state: undefined,
          star_state: undefined,
          is_pretty: undefined,
          is_boss_pit: undefined,
          sound_effect_id: undefined,
          pk_switch: undefined
        },
        formrules: {
          password: [{ validator: checkPasswordLength, trigger: 'blur' }],
          cover_picture: [
            { required: true, message: '请上传封面图', trigger: 'blur' }
          ],
          // bg_picture: [
          //   { required: true, message: '请上传背景图', trigger: 'blur' }
          // ],
          show_ball_game: [
            { required: true, message: '请输入续费', trigger: 'blur' }
          ],
          state: [{ required: true, message: '请输入返利', trigger: 'blur' }],
          star_state: [
            { required: true, message: '请输入头像框图片', trigger: 'blur' }
          ],
          is_pretty: [
            { required: true, message: '请输入进场人气加成', trigger: 'blur' }
          ],
          is_boss_pit: [
            { required: true, message: '请输入经验加速', trigger: 'blur' }
          ]
        },
        type_id: 1,
        label_id: 1,
        row_id: undefined,
        // 勾选内容
        multipleSelection: []
      }
    },
    created() {
      this.getList()
      this.getType_id(this.type_id)
      this.getLabel_id(this.label_id)
    },
    computed: {
      recommendRoom() {
        if (this.isRecommended) {
          return '取消房间推荐'
        } else {
          return '房间推荐'
        }
      },
      topRoom() {
        if (this.isTop) {
          return '取消房间置顶'
        } else {
          return '置顶房间'
        }
      },
      classificationValue() {
        return this.classification.map((item) => item.value)
      }
  
    },
    methods: {
      handleCheckedChange(val) {
        console.log(this.checkedItem)
        let checkedCount = val.length
        this.checkAll = checkedCount === this.classification.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.classification.length
  
      },
      handleCheckAllChange(val) {
        this.checkedItem = val ? this.classificationValue : []
        this.isIndeterminate = false
      },
      searchList() {
        this.listQuery.page = 1
        this.getList()
      },
      handleChangePic(fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1)
        }
      },
      // 房间流水
      getRoomWaterList() {
        this.roomWaterListLoading = true
        let urlData = '?'
        if (this.roomWaterQuery.page) {
          urlData = urlData + `page=${this.roomWaterQuery.page}&`
        }
        if (this.roomWaterQuery.perPage) {
          urlData = urlData + `perPage=${this.roomWaterQuery.perPage}`
        }
        if (this.roomWaterQuery.id) {
          urlData = urlData + `&id=${this.roomWaterQuery.id}`
        }
        if (this.roomWaterQuery.start_time) {
          urlData = urlData + `&start_time=${this.roomWaterQuery.start_time}`
        }
        if (this.roomWaterQuery.end_time) {
          urlData = urlData + `&end_time=${this.roomWaterQuery.end_time}`
        }
        getRoomWater(urlData).then(response => {
          if (response.code === 200) {
            this.roomWaterMenuList = response.data.list
            this.roomWaterQuery.total = response.data.meta.total
            this.roomWaterHeadTotalPrice = response.data.header.total_price
            this.roomWaterListLoading = false
          }
        })
      },
      resetRoomWaterList() {
        this.roomWaterQuery.start_time = undefined
        this.roomWaterQuery.end_time = undefined
      },
      beforeAvatarUpload(file) {
        this.form.head_picture = file
      },
      handleEditDetailSuccess() {
        this.form.cover_picture = this.ossLastImgUrl
        this.editDetailFileList = [{ url: this.ossLastImgUrl }]
      },
      handleEditDetailRemove() {
        this.form.cover_picture = undefined
        this.editDetailFileList = []
      },
      handleEditDetailSuccess2() {
        this.form.bg_picture = this.ossLastImgUrl
        this.editDetailFileList2 = [{ url: this.ossLastImgUrl }]
      },
      handleEditDetailRemove2() {
        this.form.bg_picture = undefined
        this.editDetailFileList2 = []
      },
      handleCreateHallSuccess() {
        this.createHallForm.avatar = this.ossLastImgUrl
        this.createHallFileList = [{ url: this.ossLastImgUrl }]
      },
      handleCreateHallRemove() {
        this.createHallForm.avatar = undefined
        this.createHallFileList = []
      },
      getType_id(typeId) {
        let urlData = `?type=${typeId}`
        getTypearr(urlData).then(response => {
          if (response.code === 200) {
            for (let i in response.data) {
              this.type_idStatus.push({ key: i, lab: response.data[i] })
            }
          }
        })
      },
      getLabel_id(typeId) {
        let urlData = `?type=${typeId}`
        getLabelarr(urlData).then(response => {
          if (response.code === 200) {
            for (let i in response.data) {
              this.label_idStatus.push({ key: i, lab: response.data[i] })
            }
          }
        })
      },
      getList() {
        this.listLoading = true
        listData(this.listQuery).then(({ data }) => {
          this.menuList = data.list
          this.total = data.meta.total
          this.listLoading = false
          this.confirmBtn = false
        })
      },
      /* 重置表单 */
      resetList() {
        Object.keys(this.listQuery).forEach(key =>
          this.$set(this.listQuery, key, undefined)
        )
        this.listQuery.page = 1
        this.listQuery.perPage = 10
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      allDel() {
        if (this.confirmBtn) return
        this.confirmBtn = true
        let delNum = []
        this.$refs.dataList.selection.forEach(k => {
          delNum.push(k.id)
        })
        if (delNum.length === 0) {
          return
        }
        let data = { ids: delNum.toString() }
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify(notify)
          } else {
            this.confirmBtn = false
          }
        })
      },
      submitForm() {
        if (this.confirmBtn) return
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.confirmBtn = true
            let obj = {}
            for (let key in this.form) {
              if (
                this.form[key] !== undefined &&
                this.form[key] !== null &&
                this.form[key] !== ''
              ) {
                obj[key] = this.form[key]
              }
            }
            putEditData(this.row_id, obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify(notify)
                this.dialogFormVisible = false
              } else {
                this.confirmBtn = false
                this.$message({
                  message: response.message,
                  type: 'error'
                })
              }
            })
          }
        })
      },
      formatData(obj) {
        return Object.keys(obj).reduce((preResult, current) => {
          preResult.push({ value: parseInt(current), label: obj[current] })
          return preResult
        }, [])
      },
      rowUpdate(row) {
        this.row_id = row.id
        listDetailData(row.id).then(
          ({
            data: {
              type,
              sys_type,
              room_label,
              room_sound_effect,
              room_id,
              room_name,
              label_id,
              type_id,
              sys_type_id,
              hot_sort,
              hot_model,
              playing,
              greeting,
              cover_picture,
              bg_picture,
              show_ball_game,
              state,
              is_pretty,
              is_boss_pit,
              sound_effect_id,
              pk_switch
            }
          }) => {
            if (
              this.typeOptions.length === 0 ||
              this.sysTypeOptions.length === 0 ||
              this.labelOptions.length === 0 ||
              this.soundOptions.length === 0
            ) {
              this.typeOptions = []
              this.sysTypeOptions = []
              this.labelOptions = []
              this.soundOptions = []
  
              this.typeOptions = this.formatData(type)
              this.sysTypeOptions = this.formatData(sys_type)
              this.labelOptions = this.formatData(room_label)
              this.soundOptions = this.formatData(room_sound_effect)
            }
  
            this.form.password = ''
            this.form.room_id = room_id
            this.form.room_name = room_name
            this.form.label_id = parseInt(label_id)
            this.form.type_id = parseInt(type_id)
            if (parseInt(sys_type_id) !== 0) {
              this.form.sys_type_id = parseInt(sys_type_id)
            } else {
              this.form.sys_type_id = undefined
            }
  
            this.form.hot_sort = hot_sort
            this.form.hot_model = hot_model
            this.form.playing = playing
            this.form.greeting = greeting
            if (cover_picture) {
              this.form.cover_picture = cover_picture
              this.editDetailFileList = [{ url: cover_picture }]
            } else {
              this.form.cover_picture = undefined
              this.editDetailFileList = []
            }
  
            if (bg_picture) {
              this.form.bg_picture = bg_picture
              this.editDetailFileList2 = [{ url: bg_picture }]
            } else {
              this.form.bg_picture = undefined
              this.editDetailFileList2 = []
            }
  
            this.form.show_ball_game = show_ball_game
            this.form.state = state
            this.form.star_state = state
            this.form.is_pretty = is_pretty
            this.form.is_boss_pit = is_boss_pit
            this.form.pk_switch = pk_switch
            if (sound_effect_id) {
              this.form.sound_effect_id = parseInt(sound_effect_id)
            } else {
              this.form.sound_effect_id = undefined
            }
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
          }
        )
      },
      rowWater(row) {
        this.row_id = row.id
        this.roomWaterQuery.id = row.id
        this.roomWaterQuery.page = 1
        this.roomWaterQuery.perPage = 10
        this.roomWaterQuery.start_time = undefined
        this.roomWaterQuery.end_time = undefined
        this.getRoomWaterList()
        this.roomWaterVisible = true
      },
  
      rowPopularity(row) {
        this.row_id = row.id
        this.sendPopularityForm.room_name = row.room_name
        this.sendPopularityVisible = true
      },
      confirmSendPopularity(formName) {
        if (this.confirmBtn) return
  
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.confirmBtn = true
            let obj = {}
            obj.expire_time = this.sendPopularityForm.time
            obj.popularity = Number(this.sendPopularityForm.popularity)
            postSendPopularity(this.row_id, obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.sendPopularityVisible = false
                this.$notify(notify)
              } else {
                this.confirmBtn = false
              }
            })
          } else {
            return false
          }
        })
      },
      rowHall(row) {
        this.row_id = row.id
        this.createHallForm = {
          sociaty_name: undefined,
          description: undefined,
          sociaty_no: undefined,
          avatar: undefined
        }
        this.createHallFileList = []
        this.createHallVisible = true
      },
      confirmCreateHall(formName) {
        if (this.confirmBtn) return
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.confirmBtn = true
            let obj = Object.assign({ id: this.row_id }, this.createHallForm)
            postCreateHall(obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.createHallVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  position: 'bottom-right',
                  showClose: false,
                  duration: 3000
                })
              } else {
                this.confirmBtn = false
              }
            })
          } else {
            return false
          }
        })
      },
      rowBan(row) {
        this.row_id = row.id
        this.banVisible = true
      },
      confirmBan(formName) {
        if (this.confirmBtn) return
  
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.confirmBtn = true
            let obj = Object.assign({ id: this.row_id }, this.banForm)
            postBanRoom(obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.banVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  position: 'bottom-right',
                  showClose: false,
                  duration: 3000
                })
              } else {
                this.confirmBtn = false
              }
            })
          } else {
            return false
          }
        })
      },
      rowCancelBan(row) {
        this.row_id = row.id
        this.cancelBanVisible = true
      },
      confirmCancelBan() {
        if (this.confirmBtn) return
        this.confirmBtn = true
        postCancelBanRoom({ id: this.row_id }).then(response => {
          if (response.code === 200) {
            this.getList()
            this.cancelBanVisible = false
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
          } else {
            this.confirmBtn = false
          }
        })
      },
      rowWaterSet(row) {
        this.row_id = row.id
        this.setWaterVisible = true
      },
      confirmSetWater(formName) {
        if (this.confirmBtn) return
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.confirmBtn = true
            let obj = {}
            obj.water_ratio = parseInt(this.setWaterForm.percent)
            postSetWater(this.row_id, obj).then(response => {
              if (response.code === 200) {
                this.getList()
                this.setWaterVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  position: 'bottom-right',
                  showClose: false,
                  duration: 3000
                })
              } else {
                this.confirmBtn = false
              }
            })
          } else {
            return false
          }
        })
      },
      rowDelete(row) {
        this.deleteVisible = true
        this.dataIds = { ids: row.id }
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 点击批量删除
      handleDeleteAll() {
        if (this.multipleSelection.length === 0) {
          this.$message({ message: '请先勾选要删除的内容', type: 'warning' })
          return
        } else if (this.multipleSelection.length !== 0) {
          let ids = ''
          for (let key in this.multipleSelection) {
            ids += `${this.multipleSelection[key].id},`
          }
          ids = ids.substring(0, ids.length - 1)
          this.dataIds = { ids: ids }
        }
        this.deleteVisible = true
      },
      // 确定删除
      confirmDelete() {
        if (this.confirmBtn) return
        this.confirmBtn = true
        this.deleteDialogVisible = false
        deleteData(this.dataIds).then(data => {
          if (data.code === 200) {
            this.getList()
            this.deleteVisible = false
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
          } else {
            this.confirmBtn = false
          }
        })
      },
      resetForm() {
        Object.keys(this.form).forEach(key =>
          this.$set(this.form, key, undefined)
        )
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm'])
          /* 清除整个表单的校验 */{
          this.$refs['dataForm'].clearValidate()
        }
      },
      handleResetHeat() {
        if (this.multipleSelection.length === 0) {
          this.$message({ message: '请先勾选内容', type: 'warning' })
          return
        } else if (this.multipleSelection.length !== 0) {
          let ids = []
          for (let key in this.multipleSelection) {
            ids.push(this.multipleSelection[key].id)
          }
          this.room_ids = { room_ids: ids }
        }
        this.resetHeatVisible = true
      },
      showRecommendedRoom(row) {
        if (row.recommend_status === 1) {
          this.isRecommended = true
        } else {
          this.isRecommended = false
        }
        this.recommendRoomIds = {
          room_ids: [row.id]
        }
        this.recommendedVisible = true
      },
      showTopRoom(row) {
        if (row.top_status === 1) {
          this.isTop = true
        } else {
          this.isTop = false
        }
        this.topRoomIds = {
          room_ids: row.id
        }
        this.checkedItem = []
        this.topVisible = true
      },
      confirmBatchRoom() {
        batchResetPop(this.room_ids).then(data => {
          if (data.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
            this.resetHeatVisible = false
          }
        })
      },
      confirmRecommend() {
        if (this.isRecommended) {
          cancelRecommendRoom(this.recommendRoomIds).then(data => {
            if (data.code === 200) {
              this.getList()
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.recommendedVisible = false
            }
          })
        } else {
          recommendRoom(this.recommendRoomIds).then(data => {
            if (data.code === 200) {
              this.getList()
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              })
              this.recommendedVisible = false
            }
          })
        }
        this.recommendRoomIds = []
  
      },
      confirmTop() {
        if (!this.checkedItem.length && !this.isTop) return this.$message.error('至少选择一项')
        let room_data = {
          room_id: this.topRoomIds.room_ids,
          op_type: this.isTop ? 2 : 1,
          stick_type: this.checkedItem
        }
        TopRoom(room_data).then(data => {
          if (data.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
            this.topVisible = false
          }
        })
  
      },
      resetAudit(row) {
        resetRoomAudit({ room_id: row.id }).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })
          } else {
            this.confirmBtn = false
          }
        })
      },
    }
  }
  </script>
  